import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { Form, Typography, Alert } from 'antd';
import AutoRenderComponent from '@/pages/WorkFlow/components/FormControls/components/AutoRenderComponent/AutoRenderComponent';
import TableDiff from '@/components/Custom/TableDiff';
import { Link, withRouter } from 'umi';
import { useMount } from 'react-use';

/**
 * 薪资参考流程套件
 * 薪资参考导入和恢复公用这一个流程审批页面, 通过 fType(import | rollback) 来区分
 * @returns {*}
 */
const SalaryApply = ({ form, dataSource, formValueMap, location }) => {
    // 有子表单的时候使用 wrapperLayout 参数继承表单风格
    const [componentError, setComponentError] = useState(null);
    const { children: list } = dataSource;
    const { getFieldDecorator, setFieldsValue } = form;
    const { hiDataId, version, ftype } = location.query; // version, fType 只会在提交流程会有值
    const isConfigureStage = !formValueMap && !hiDataId; // 是否是配置节点, 配置流程预览使用. 没有任何有效数据!!!
    const isCommitStage = !formValueMap && hiDataId; // 是否是流程提交阶段, 该阶段部分参数是通过 URL 传参过来的
    // const isApprovalStage = !formValueMap; // 是否是流程审批阶段
    const versionValue = isCommitStage ? version : formValueMap?.version;
    const fTypeValue = isCommitStage ? ftype : formValueMap?.ftype;

    useMount(() => {
        // console.log('============>审批套件调试:dataSource', dataSource);
        // console.log('============>审批套件调试:formValueMap', formValueMap);

        // 提交阶段把 URL 的参数写进表单. (也称这为 "固化参数", 意思是当下数据状态保存下来)
        if (isCommitStage) {
            // 容错判断
            if (!hiDataId || !version || !ftype) {
                setComponentError('当前是薪资参考流程提交阶段, 但参数有误, 请检查!');
            }
            setFieldsValue({ hiDataId, version, ftype }); // 表单赋值必须在表单加载完成后进行
        }
    });

    // 帮助提示组件
    const SalaryApplyAlert = () => {
        const DetailLink = (
            <Link
                to={{
                    pathname: '/office/personnelManagement/organization/dataManagement/salaryReference',
                    state: { tabRoute: true, tabRefresh: true }
                }}
            >
                查看当前版本
            </Link>
        );
        return (
            !isConfigureStage && (
                <Alert
                    style={{ marginBottom: 20 }}
                    message={
                        <>
                            <Typography>
                                {/* 不同类型的审批显示不同的说明 */}
                                {fTypeValue === 'rollback' ? (
                                    <>
                                        <span>与当前版本相比有以下修改内容，</span>
                                        <span style={{ color: '#FF4000' }}>红色</span>表示删除，
                                        <span style={{ color: '#00C800' }}>绿色</span>表示新增，
                                        <span style={{ color: '#BCA3EF' }}>紫色</span>表示更新。
                                        <span>请确认并提供审批意见，全部审批通过后，系统将自动更新版本</span>
                                        &emsp;{DetailLink}
                                    </>
                                ) : (
                                    <div>恢复到历史版本，以下为该版本的完整内容&emsp;{DetailLink}</div>
                                )}
                            </Typography>
                        </>
                    }
                    type="info"
                    showIcon
                />
            )
        );
    };

    // 套件错误提示组件
    const ErrorTips = () => <Alert message={componentError} type="error" showIcon />;

    if (componentError) {
        return ErrorTips;
    }

    return (
        <>
            {!isCommitStage && <SalaryApplyAlert />}
            <Form.Item label="变更内容">
                {isConfigureStage ? (
                    // 组件预览的时候 显示这个
                    <Typography.Text type="secondary">流程发起后可以看到</Typography.Text>
                ) : (
                    // 数据拉取等操作组件内部处理
                    <TableDiff
                        value={versionValue}
                        type={fTypeValue}
                        setSalaryStandardName={() => {}} // 原组件预留的一个非业务相关的属性
                    />
                )}
            </Form.Item>
            {/* 遍历配置里面的子组件 */}
            {list?.map(item => {
                const { label, formId, rules, extra } = item;
                let { initialValue } = item;

                // 特殊组件赋值(类似隐藏域): 业务跳转过来, 这里不可编辑, 又要带给后台的数据, 通过 inRenderDom 来模拟隐藏域
                switch (formId) {
                    case 'hiDataId':
                        initialValue = formValueMap?.hiDataId;
                        break;
                    case 'version':
                        initialValue = formValueMap?.version;
                        break;
                    case 'ftype':
                        initialValue = formValueMap?.ftype;
                        break;
                    default:
                }

                return (
                    <Form.Item
                        label={label}
                        key={formId}
                        extra={extra}
                        style={{ display: item?.inRenderDom === false ? 'none' : 'block' }}
                    >
                        {getFieldDecorator(formId, {
                            initialValue,
                            rules
                        })(<AutoRenderComponent form={form} config={item} />)}
                    </Form.Item>
                );
            })}
        </>
    );
};

SalaryApply.propTypes = {
    form: PropTypes.object.isRequired,
    dataSource: PropTypes.object.isRequired, // 套件配置文件
    formValueMap: PropTypes.object // 流程开始阶段有前端组织好数据传给后端写入暂存表, 流程审批阶段通过这个参数来获取表单数据
};

SalaryApply.defaultProps = {
    formValueMap: null // 提交阶段是没有值的
};

export default withRouter(SalaryApply);
